<template>
	<view class="site-wrap">
		<nav-bar class="header" title="站点管理" @goBack="goBack">
		</nav-bar>
		<!-- 上半部分 -->
		<view class="site-detail">
			<van-form>
				<van-field v-model="params.name||'--'" :colon="true" type='textarea' rows="1" autosize disabled label="站点名称" input-align="right" />
				<van-field v-model="params.orgName||'--'" disabled label="地理区域" input-align="right" />	
				<van-field v-model="params.areaName||'--'" disabled label="具体位置" input-align="right" />
				<van-field v-model="params.stationTypeName||'--'" disabled label="站点类型" input-align="right" />
				<van-field v-model="params.equLevelText||'--'" disabled label="通信网等级" input-align="right" />
				<van-field v-model="params.begDate||'--'" disabled label="投运时间" input-align="right" />
				<van-field v-model="params.voltageClassName||'--'" disabled label="电压等级" input-align="right" />
				<van-field v-model="params.roomNum||'--'" disabled label="机房数量" input-align="right" />
			</van-form>
		</view>
		<!-- tab切换 -->
		<div class="cable-info-tab">
			<div class="info-tab-item" :class="currentTab === 'device' ? ' info-tab-current': ''"
				@click="tabChange('device')">站点设备</div>
			<div class="info-tab-item" :class="currentTab === 'opticalCable' ? ' info-tab-current': ''"
				@click="tabChange('opticalCable')">站点光缆</div>
		</div>
		<!-- 站点设备 -->
		<view class="device-echarts" v-if="currentTab === 'device'">
			<view class="pieChart">
				<echartsPie v-bind="milestoneEchart" @jumpClick='jumpClick'></echartsPie>
			</view>
			<view class="view-all" @click="viewAll('device')">
				查看全部
			</view>
		</view>

		<!-- 站点光缆 -->
		<view class="optical-cable-echarts" v-if="currentTab === 'opticalCable'">
			<!-- 光缆tab切换 -->
			<view class="optical-cable-tab">
				<view class="optical-cable-item" v-for="(item,index) in tabList" :key="index"
					:class="index == opticalCableIndex ? 'active':'' " @click="changeopticalCable(index,item)">
					{{item.display}}({{item.content}})
				</view>
			</view>
			<view class="pieChart2">
				<echartsPie v-bind="milestoneEchart" @jumpClick='jumpClick'></echartsPie>
			</view>
			<view class="view-all" @click="viewAll('opticalCable')">
				查看全部
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "../../../components/common/nav-bar.vue";
	import echartsPie from '../common/echartsPie.vue'
	import {
		getSiteOverallDetail,
		getPieChart
	} from "../../../api/ydtzApi.js"
	export default {
		data() {
			return {
				chart: null,
				siteName: 'AAAAAA变电站',
				currentTab: 'device',
				opticalCableIndex: 0,
				objId: null,
				siteDeviceTotal: '',
				tabList: ['500KV以上(23)', '220KV(2)', '110KV以上(2)', '其他或无(2)'],
				params: {
					name: '',
					orgName: '',
					addr: '',
					areaName: '',
					stationTypeName: '',
					voltageClassName: '',
					roomNum: '',
					equLevelText: '',
					begDate: ''
				},
				siteDevice: [],
				siteDeviceTemp: [],
				objId: null,
				title: null,
				key: null,
				siteDeviceTotal1: ''

			}
		},
		components: {
			navBar,
			echartsPie
		},
		computed: {
			milestoneEchart: function() {
				const xData = Array.from(this.siteDevice, ({
					display
				}) => display);
				const yData = Array.from(this.siteDevice, ({
					content
				}) => content);
				const charDataPie = {
					xData: xData,
					yData: [yData],
					color: ['#417ADC', '#5494FF', '#60EDEF', '#53D25B', '#FEC319'],
					title: this.title,
					grName: String(this.siteDeviceTotal),
					legendData: xData,
				};
				return charDataPie;
			},
		},
		onLoad(option) {
			this.objId = option.objId
			this.getSiteOverallDetail(option.objId)
		},
		methods: {
			// 获取详情
			getSiteOverallDetail() {
				this.$apiRequest.ydtzApi.getSiteOverallDetail({
					objId: this.objId
				}).then(({
					data: res
				}) => {
					this.params.name = res.name
					this.params.orgName = res.orgName
					this.params.addr = res.addr
					this.params.areaName = res.areaName
					this.params.stationTypeName = res.stationTypeName
					this.params.voltageClassName = res.voltageClassName
					this.params.roomNum = res.roomNum
					this.params.equLevelText = res.equLevelText
					this.params.begDate = res.begDate
					this.params.addr = res.addr
					this.siteDevice = res.siteDevice
					let siteDeviceTotal = null
					res.siteDevice.forEach(val => {
						siteDeviceTotal += val.content
						return siteDeviceTotal
					})
					this.siteDeviceTotal = siteDeviceTotal
					this.title = '设备总数'
					this.tabList = res.opticalVoltageClass
					this.key = res.opticalVoltageClass[0].key
				})
			},
			getPieChart(key) {
				this.$apiRequest.ydtzApi.getPieChart({
					siteId: this.objId,
					opticalCableFlag: key
				}).then(({
					data: res
				}) => {
					this.siteDevice = res
					let siteDeviceTotal = null
					res.forEach(val => {
						siteDeviceTotal += val.content
						return siteDeviceTotal
					})
					this.title = '光缆总数'
					this.siteDeviceTotal = siteDeviceTotal
				})
			},
			tabChange(currentTab) {
				this.currentTab = currentTab
				if (currentTab == 'opticalCable') {
					this.getPieChart(this.key)
					this.opticalCableIndex = 0
				} else {
					this.getSiteOverallDetail()
				}
			},
			changeopticalCable(index, item) {
				this.opticalCableIndex = index
				this.getPieChart(item.key)
			},
			goBack() {
				uni.navigateBack()
			},
			jumpClick(option) {
				if (this.currentTab == 'opticalCable') {
					let opticalCableFlag = this.tabList[this.opticalCableIndex].key
					let fiberType = null
					this.siteDevice.forEach(val => {
						if (val.display == option) {
							fiberType = val.key
						}
					})
					
					uni.navigateTo({
						url: `/pages/standingBook/communicationOpticalCable/communicationOpticalCable?siteId=${this.objId}&fiberType=${fiberType}&opticalCableFlag=${opticalCableFlag}`
					})
				} else {
					let deviceFlag = null
					this.siteDevice.forEach(val => {
						if (val.display == option) {
							deviceFlag = val.key
						}
					})
					uni.navigateTo({
						url: `/pages/standingBook/transmissionEquipment/transmissionEquipment?siteid=${this.objId}&deviceFlag=${deviceFlag}`
					})
				}
			},
			// echarts 查看全部
			viewAll(option) {
				let opticalCableFlag = this.tabList[this.opticalCableIndex].key
				if (option == 'device') {
					// 跳转到设备列表
					uni.navigateTo({
						url: `/pages/standingBook/transmissionEquipment/transmissionEquipment?siteid=${this.objId}&siteFilter=true`
					})
				} else if (option == 'opticalCable') {
					// 跳转到光缆列表
					uni.navigateTo({
						url: `/pages/standingBook/communicationOpticalCable/communicationOpticalCable?siteId=${this.objId}`
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f2f6fa;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.site-wrap {
		padding-bottom: px2vh(30);
	}

	.optical-cable-echarts {
		width: calc(100vw - #{px2vw(60)});
		height: px2vh(775);
		background: #fff;
		border-radius: px2vw(20);
		margin: 0 auto;

		box-sizing: border-box;

		.pieChart2 {
			width: 100%;
			height: px2vh(505);
			padding: px2vh(20) 0;

		}

		.optical-cable-tab {
			height: px2vh(118);
			display: flex;
			margin: 0 px2vw(20);
			box-sizing: border-box;
			font-size: px2vh(32);
			color: #666666;
			line-height: px2vh(62);
			align-items: center;
			justify-content: space-between;
			border-bottom: px2vh(1) solid #e5e5e5;

			.optical-cable-item {
				width: 24%;
				font-size: px2vh(30);
				overflow: hidden;
				height: px2vh(108);
				line-height: px2vh(108);
				text-align: center;
			}
			.optical-cable-item:first-child{
				width: 28%;
			}
			.active {
				color: #417adc;
				font-weight: 700;
				border-bottom: px2vh(10) solid #417ADC;
			}
		}
	}

	.device-echarts {
		width: calc(100vw - #{px2vw(60)});
		height: px2vh(658);
		background: #fff;
		border-radius: px2vw(20);
		margin: 0 auto;

		& .pieChart {
			width: 100%;
			height: px2vh(505);
			padding: px2vh(20) 0;
		}
	}

	.view-all {
		margin: 0 px2vw(20);
		font-size: px2vh(32);
		color: #aaa;
		text-align: center;
		line-height: px2vh(113);
		border-top: px2vh(2) dashed #eee;
	}

	.site-detail {
		width: calc(100vw - #{px2vw(60)});
		background: #fff;
		border-radius: px2vw(20);
		margin: px2vh(30) auto;

		::v-deep .van-field__control:disabled {
			-webkit-text-fill-color: #333;
			font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		}
	}

	.cable-info-tab {
		width: calc(100% - #{px2vw(60)});
		height: px2vh(120);
		border-radius: px2vw(20);
		box-sizing: border-box;
		margin: px2vh(40) px2vw(30) px2vh(30);
		padding: 0 px2vw(10);
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.info-tab-item {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			font-size: px2vw(38);

			&.info-tab-current {
				height: px2vh(100);
				border-radius: px2vw(20);
				background-color: rgba(65, 122, 220, 1);
				color: rgba(255, 255, 255, 1);
				font-weight: Bold;
			}
		}
	}
</style>